<template>
  <div class="dashboard">
    <h1>流水</h1>
    <div class="dashboard-header">
      
    </div>
    <div  class="charts">

      <div class="chart-container" ref="chart"></div>
      <div class="chart-container" ref="chart2"></div>


    </div>
    <div class="button-container">
    <button class="custom-button" @click="redirectToOtherPage">跳转到商品页面</button>
  </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      title: '商品',
      chartData: [
        { x: 1, y: 10 },
        { x: 2, y: 5 },
        { x: 3, y: 15 },
        { x: 4, y: 16 },
        { x: 5, y: 18 },
        { x: 6, y: 19 },
        { x: 7, y: 22 },
        { x: 8, y: 25 },
        { x: 9, y: 19 },
        { x: 10, y: 15 },
        { x: 11, y: 15 },
        { x: 12, y: 15 },
        { x: 13, y: 18 },
        { x: 14, y: 22 },
        { x: 15, y: 25 }

        // 添加更多数据点...
      ],
       chartData2: [
        { x: 1, y: 14 },
        { x: 2, y: 5 },
        { x: 3, y: 14 },
        { x: 4, y: 7 },
        { x: 5, y: 18 },
        { x: 6, y: 7 },
        { x: 7, y: 4 },
        { x: 8, y: 25 },
        { x: 9, y: 5 },
        { x: 10, y: 24 },
        { x: 11, y: 15 },
        { x: 12, y: 15 },
        { x: 13, y: 9 },
        { x: 14, y: 22 },
        { x: 15, y: 25 }

        // 添加更多数据点...
      ],
    };
  },
  mounted() {
    this.initChart();
    this.initSecondChart(); // 初始化第二个图表
  },
  methods: {
    redirectToOtherPage() {
    // 执行页面跳转逻辑，例如使用 Vue Router 进行路由导航
    this.$router.push('/sys/user');
  },

    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        xAxis: {
          type: 'category',
          data: this.chartData.map(data => data.x),
          axisLabel: {
            show: true,
            formatter: '{value} 天', //x 轴的名称
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            formatter: '{value} 件', // y 轴的名称
          },
        },
        series: [
          {
            type: 'line',
            data: this.chartData.map(data => data.y),
          },
        ],
      };

      myChart.setOption(option);
    },
    initSecondChart() {
      const chartDom2 = this.$refs.chart2;
      const mySecondChart = echarts.init(chartDom2);

      const option2 = {
        // 配置第二个图表的选项，这里可以复制第一个图表的配置，
        // 然后根据需要进行修改，比如改变 series 类型、数据等
        xAxis: {
          // ... 和 initChart 方法中的配置类似或不同
          type: 'category',
          data: this.chartData2.map(data => data.x),
          axisLabel: {
            show: true,
            formatter: '{value} 月', //x 轴的名称
          },
        },
        yAxis: {
          // ... 和 initChart 方法中的配置类似或不同
          type: 'value',
          axisLabel: {
            show: true,
            formatter: '{value} 件', // y 轴的名称
          },
        },
        series: [
          {
            // ... 和 initChart 方法中的配置类似或不同
            type: 'line',
            data: this.chartData2.map(data => data.y),
            
          },
        ],
      };

      mySecondChart.setOption(option2);
    },
  },
  
};
</script>

<style scoped>
.charts {
  display: flex;
  justify-content: space-around; /* 或者其他你希望的布局方式 */
}

.chart-container {
  width: 45%; /* 根据需要调整宽度 */
  height: 300px;
}
h1 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.custom-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1e90ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.custom-button:hover {
  background-color: #be8cbe;
}
</style>